<template>
      <div >
    <van-nav-bar
      :title="subject+'顺序练习'"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="NavBar"
    />
  </div>
  <div class="background">
     <div class="card">
     <div class="nei-biao">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" class="sculpture">
        <p>{{ userName }}</p>
         <div style="color: gray;" @click="show = true">{{ date ? '距离考试时间还有' + kday +'天': '请选择考试日期'}}</div>
    </div>
    <div class="giid">
    <van-grid :border="false" :column-num="4">
  <van-grid-item>
   <p>{{ total - end }}</p>
  </van-grid-item>
  <van-grid-item>
    <p>{{ end }}</p>
  </van-grid-item>
  <van-grid-item>
    <p>{{ wrong }}</p>
  </van-grid-item>
  <van-grid-item>
    <p>{{ ratio + '%' }}</p>
  </van-grid-item>
</van-grid>
<van-grid :border="false" :column-num="4">
  <van-grid-item>
   <p>未做题</p>
  </van-grid-item>
  <van-grid-item>
    <p>已做题</p>
  </van-grid-item>
  <van-grid-item>
    <p>错题</p>
  </van-grid-item>
  <van-grid-item>
    <p>正确率</p>
  </van-grid-item>
</van-grid>
</div>
    


        <div class="btn">
        <van-button round type="success" color="#0AB2FB" block style="width: 200px;" @click="$router.push('/cp/'+id)">开始练习</van-button>
        </div>
  </div>
  
    <van-calendar v-model:show="show" @confirm="onConfirm" />
  </div>
 
</template>

<script setup>
import { createApp,ref,onMounted } from 'vue';
import { Image as VanImage,Calendar,Button,Grid, GridItem} from 'vant';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import httpApi from '@/http';

const route = useRoute()
const store = useStore()

let id = null
let subject = ''
const userName = store.state.user.user_name
const aid = route.params.id
if(aid==1){
  id = 1
  subject = '科目一'
}else {
  id = 5
  subject = '科目四'
}
const end = ref(0)
const total = ref(0)
const wrong = ref(0)
const ratio = ref(0)
onMounted(()=>{
  let done_subj = subject
  let userId = store.state.user.user_id
  httpApi.doneApi.queryByUserA({userId,done_subj}).then(res=>{
    // console.log('已激活题',res)
    res.data.data.forEach(item=>{
      if(item.done_state){
        end.value += 1
        if(item.done_state==2) {
          wrong.value += 1
        }
      }
    })
    // console.log(end.value,wrong.value)
    let ok = end.value-wrong.value
    let x = ok/end.value * 100||0
    if(end.value==0){
      ratio.value = 0 
    }else if(ok*100%end.value < end.value*0.005){
      ratio.value = Math.floor(ok*100/end.value)
    }else if(ok*1000%end.value < end.value*0.05){
      ratio.value = x.toFixed(1)
    }else {
      ratio.value = x.toFixed(2)
    }
    // console.log('正确率',x)
    // console.log('百分比',ratio.value)

  })
  let subjectstype = subject
  httpApi.exerApi.queryBySubj({subjectstype}).then(res=>{
    // console.log('所有习题',res)
    let arr = res.data.data
    for(let i=0;i<arr.length;i++){
      total.value += 1
    }
    // console.log(total.value)
  })
})


const app = createApp();
const date = ref('');
const show = ref(false);
const onClickLeft = () => history.back();


const formatDate = (date) => `${date}`;
const kday=ref(0)
const onConfirm = (value) => {

      show.value = false;
      date.value = formatDate(value);
      console.log(new Date(date.value).getTime(),'aaa');
      console.log(date.value);
      const d =new Date(date.value).getTime() - new Date().getTime()//当前日期-指定时间
      const day = d / (24 * 60 * 60 * 1000)  //计算天数
      console.log(d) //打印时会存在小数，根据业务需求选择截取方式
      kday.value = Math.ceil(day)  //小数取整（+1）
      console.log(kday);
    };
    

app.use(VanImage);
app.use(Calendar);
app.use(Button);
app.use(Grid);
app.use(GridItem)

</script>

<style lang="scss" scoped>
.sculpture {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}
.card {
    width: 300px;
    height: 400px;
    border-radius: 2%;
    background-color: rgba(255, 255, 255, 0.925);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.nei-biao>p {
    font-size: 15px;
    
    margin-left: 80px;
    margin-top: -40px;
}
.nei-biao>div {
  font-size: 12px;
  margin-left: 80px;
}
.card img {
    margin-top: 20px;
    margin-left: 20px;
}
.background {
    background-image: linear-gradient(hsla(184, 100%, 50%, 0.829), #d6ddd4);
    height: 500px;
    position: relative;
}

.btn {
  margin-left: 50px;
}
.giid{
  margin:60px 0;
}
</style>